<template>
  <div>
    <el-dialog :title="maintitle" :visible.sync="dialogVisible" width="50%">
      <el-form labelWidth="100px">
        <el-form-item label="人员姓名" class="is-required" style="width:100%">
          <searchperson @getpersonid="getpersonid" :itempersonid="perData.hash.pid"></searchperson>
          <div class="el-form-item__error" v-if="!$v.perData.hash.pid.required">
            请选择人员姓名
          </div>
        </el-form-item>
        <el-form-item label="获奖时间" class="is-required" style="width:100%">
          <el-date-picker
            v-model="perData.hash.grantime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.perData.hash.grantime.required">
            请选择获奖时间
          </div>
        </el-form-item>
        <el-form-item label="获奖内容" class="is-required" style="width:100%">
          <el-input v-model="perData.hash.content" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.perData.hash.content.required">
            请输入获奖内容
          </div>
        </el-form-item>
        <el-form-item label="附件" style="width:100%">
          <upload2 :filelimit="5" :filelink.sync="filelink" :ispic="false" :isedit="false"></upload2>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addper">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';
import searchperson from '~/components/common/searchperson.vue';
import { required } from 'vuelidate/lib/validators';

export default {
  validations: {
    perData: {
      hash: {
        pid: {
          required,
        },
        grantime: {
          required,
        },
        content: {
          required,
        },
      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      ts: this.newStore(),
      disable: false,
      maintitle: '新增个人业绩',
      perData: {
        cols: [],
        hash: {
          username: '',
          content: '',
          grantime: '',
          grantimetwo: '',
          pid: '',
          id: '',
        },
      },
      changeval: 0,
      perlist: [],
      filelink: [], // 附件
      fileminlink: [],
      fielname: [],

      fileurl: [],
    };
  },
  props: {
    chousebtn: Number,
    // chouseval: Array,
    itemvalname: Object,
  },
  components: {
    upload2,
    searchperson,
  },
  created() {
    this.getperval();
    if (this.chousebtn == 2) {
      this.maintitle = '修改个人业绩';
      this.disable = true;
      this.fileminlink = [];
      this.filelink = [];
      // console.log(this.itemvalname, "修改个人业绩信息");
      const req = {
        handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
        filetype: 'achieve',
        mainid: this.itemvalname.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fileminlink = ts.d.data.operation1;

        for (let i = 0; i < this.fileminlink.length; i += 1) {
          const a = {};
          a.name = this.fileminlink[i].hash.filename;
          a.url = this.fileminlink[i].hash.fileurl;
          this.filelink.push(a);
        }
      });
      const req2 = {
        handle: 'D328E4C742B794043F60211ED98E8FE4FA027238655B99F00FE3786F0F962D11',
        mainid: this.itemvalname.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts2) => {
        console.log(ts2.d);
      });
    }
  },
  mounted() {
    this.getperval();
  },
  methods: {
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    // 渲染信息
    getperval() {
      if (this.itemvalname == '' || this.itemvalname == undefined) {
      } else if (this.chousebtn == 2) {
        this.perData = {};
        this.perData = this.itemvalname;
      }
    },

    // 获取姓名
    getpersonid(val) {
      this.changeval = 1;
      this.perData.hash.pid = val.id;
      this.perData.hash.username = val.value;
    },
    // 新增/编辑个人业绩信息
    addper() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该个人业绩信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                'D328E4C742B794043F60211ED98E8FE4808793608E16237590BB61AA9EBA850D',
              content: this.perData.hash.content,
              grantime: this.perData.hash.grantime,
              pid: this.perData.hash.pid,
              // grantimetwo: this.perData.hash.grantimetwo,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              this.$parent.getperlist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      } else if (this.chousebtn == 2) {
        this.$confirm('是否修改该个人业绩信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                'D328E4C742B794043F60211ED98E8FE4F9D543FC4076D82C54347431A207BA75',
              content: this.perData.hash.content,
              grantime: this.perData.hash.grantime,
              pid: this.perData.hash.pid,
              // grantimetwo: this.perData.hash.grantimetwo,
              id: this.perData.hash.id,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              // console.log(ts.d);
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              // this.$emit("update:addper", this.perData);
              this.$parent.getperlist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
</style>
